fix: fix back button menu for headerBackTitleVisible prop #1646

kacperkapusciak · 2022-11-22T15:55:48Z

Description

In the native-stack, there's a headerBackTitleVisible prop which allows hiding the back button title while keeping the default < arrow. It achieves it by passing an empty string to the backTitle header prop.

Although it was a proper way of hiding the back button title prior to iOS 14 it has the negative effect of hiding all elements in the back button menu in >=iOS 14.

This can be fixed by a relatively new backButtonDisplayMode API by setting its value to minimal.

Fixes react-navigation/react-navigation/issues/11015

Screenshots / GIFs

Before

Screen.Recording.2022-11-22.at.17.01.55.mov

After

Screen.Recording.2022-11-22.at.16.43.58.mov

No effect on iOS 13 (still uses an empty string as there's no back button menu available)

Screen.Recording.2022-11-23.at.11.08.18.mov

Test code and steps to reproduce

TestsExample/Test1646.tsx

Code example

import {NavigationContainer, useRoute} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import * as React from 'react';
import {Button, View} from 'react-native';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerBackTitleVisible: false,
        }}>
        <Stack.Screen
          name="Screen"
          component={Screen}
          options={({route}) => ({title: route.params?.title ?? 'Hello'})}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function Screen({navigation}) {
  const route = useRoute();
  const count = route.params?.count ?? 0;
  return (
    <View>
      <Button
        onPress={() =>
          navigation.push(route.name, {
            title: `Hello ${count + 1}`,
            count: count + 1,
          })
        }
        title="Push a route"
      />
    </View>
  );
}

Checklist

Included code example that can be used to test this change
Ensured that CI passes

kkafar

The code looks fine. I'll test it & ship it (if everything is ok)

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>

kkafar

Looks good

not included originally due to merge conflict

kpoelhekke · 2023-02-06T10:46:10Z

It seems like this change caused an issue in our codebase because it now always shows the headerBackTitle even when headerBackTitleVisible: false. This issue exists on both iOS 13 and iOS 14. After removing this code everything is working as before again.

kkafar · 2023-02-06T13:15:23Z

@kpoelhekke,
thanks for reporting. I'll look into it.

kpoelhekke · 2023-02-06T13:59:35Z

Thanks @kkafar. FYI, these are the screenOptions that we pass:

{
        headerShown: true,
        headerBackTitleVisible: false,
        headerTintColor: theme.activeTab,
        headerBackImageSource: backIconPath,
        headerShadowVisible: false,
        orientation: "portrait_up",
        headerTitleAlign: "center",
      }

@kkafar

## Description @kkafar: #1646 introduced a bug, where if iOS version >= 14 styles for back title would not get applied, due to [ill defined `if/else-if` logic](https://github.com/software-mansion/react-native-screens/blob/5e1f7ecdf30573f3e441e73c4f1f05c1f3ab9ccb/ios/RNSScreenStackHeaderConfig.mm#L477-L491). ## Changes @kkafar: Removed the fix introduced in #1646 and replaced it with setting `backBarButtonItem`'s title to `nil` & `backBarButtonTitle` to appropriate value when back button title is supposed to be invisible. This results in no title being displayed next to back button, but the correct value is present in back menu (if one is enabled). To achieve the demanded effect I needed to distinguish between states: 1. back title visible or not next to back button 2. back title is nil / empty / whitespace only Currently when `headerBackTitleVisible: false` is set in JS, [whitespace only string is send to native side](https://github.com/software-mansion/react-native-screens/blob/5e1f7ecdf30573f3e441e73c4f1f05c1f3ab9ccb/src/native-stack/views/HeaderConfig.tsx#L105) (same thing [happens in `react-navigation`](https://github.com/react-navigation/react-navigation/blob/2ec98f3fae051c60e76aed3698d1bca6bbf730ef/packages/native-stack/src/views/HeaderConfig.tsx#L171)), but the same information can be passed to native side when user sets: ```js headerBackTitleVisible: true, headerBackTitle: ' ' ``` so we can not really determine on native side whether the back button title should be visible or not (in case of empty string / nil passed from the user we default to title of previous screen). Therefore I decided to pass `headerBackTitleVisible` prop value directly to the native side via **new prop `backTitleVisible` on `ScreenStackHeaderConfig` component** and base new logic on its (props) value. ## Screenshots / GIFs ### Before https://user-images.githubusercontent.com/32227697/221241945-58d3bb51-f25a-4d0f-b74f-a4e18792535b.mp4 ### After https://user-images.githubusercontent.com/32227697/221241962-b25108c9-beb5-4bbb-b712-3830dfc1c250.mp4 ## Test code and steps to reproduce `Test1726` in `FabricTestExample` & `TestsExample` ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation:  - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>

## Description Because of a bug introduced in #1646 `react-native-screens` v3.21 changed how header's backTitle handles whitespace strings in #1726 To allow for backwards compatibility in @react-navigation/native-stack we need have a way to check if this version or newer is used See react-navigation/react-navigation#11423 for more context. ## Changes Added new `isNewBackTitleImplementation` internal constant that can be used in `@react-navigation/native-stack`. ## Screenshots / GIFs #### This change & react-navigation/react-navigation#11423 applied: https://github.com/software-mansion/react-native-screens/assets/39658211/e2409b46-0725-473d-962b-1acc9deaa469 #### Without this change and react-navigation/react-navigation#11423: https://github.com/software-mansion/react-native-screens/assets/39658211/ec65fd5d-f8e9-4d88-b442-6bfc68e9ee9c ## Test code and steps to reproduce Test1791.tsx You need to apply changes introduced in react-navigation/react-navigation#11423 to `@react-navigation/native-stack` to test these canges. ## Checklist - [x] Included code example that can be used to test this change

## Motivation Changes made in software-mansion/react-native-screens#1646 in react-native-screens v3.19.0 introduced a bug making customizing `headerBackTitle` impossible. This got fixed in software-mansion/react-native-screens#1726 and released in `react-native-screens` **v3.21.0** with a change of `headerBackTitleVisible` logic. It requires a small adjustment in the `HeaderConfig.tsx` of the `@react-navigation/native-stack` as the empty string passed to `backTitle` results in a default back button instead of hiding it. Detailed explaination can be found in software-mansion/react-native-screens#1726 Fixes #11303, #11337 and #11375 ## Code example <details> <summary>Code example</summary> ```jsx import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; import { Button, View } from 'react-native'; const Stack = createNativeStackNavigator(); const Screen1 = ({ navigation }) => ( <View style={{ flex: 1 }}> <Button onPress={() => navigation.navigate('Screen2')} title="Next" /> </View> ); const Screen2 = ({ navigation }) => ( <View style={{ flex: 1 }}> <Button onPress={() => navigation.navigate('Screen3')} title="Next" /> </View> ); const Screen3 = ({ navigation }) => ( <View style={{ flex: 1 }}> <Button onPress={() => navigation.navigate('Screen4')} title="Next" /> </View> ); const Screen4 = () => <View style={{ flex: 1 }} />; const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen component={Screen1} name="Screen1" /> <Stack.Screen component={Screen2} name="Screen2" options={{ headerBackTitleVisible: false, headerBackTitle: 'Custom title in back button menu', }} /> <Stack.Screen component={Screen3} name="Screen3" options={{ headerBackTitle: 'Small title', headerBackTitleStyle: { fontSize: 8 }, }} /> <Stack.Screen component={Screen4} name="Screen4" options={{ headerBackTitle: 'Custom title', }} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` </details> ## Screen recordings #### `react-native-screens` v3.21.1 with fix in `@react-navigation/native-stack`: On the second screen header back title is hidden as it should and back button menu working ✅ https://github.com/react-navigation/react-navigation/assets/39658211/cc710687-3a64-4746-963e-a211a1b36455 #### `react-native-screens` v3.21.1 without the fix in `@react-navigation/native-stack`: On the second screen you can see the default header back title is shown instead of being hidden ❌ https://github.com/react-navigation/react-navigation/assets/39658211/2380dc4a-58c2-4376-a32d-a4249e3d8cc0 #### `react-native-screens` v3.20.0: Here the back button is all over the place ❌ https://github.com/react-navigation/react-navigation/assets/39658211/429c451a-3775-4d3f-bc08-6e33a2ac4af6 #### `react-native-screens` v3.18.2: Backward compatibility is kept in place (but back button menu doesn't work as expected in v3.18) ✅ https://github.com/react-navigation/react-navigation/assets/39658211/15665b45-1797-412e-9a13-540320dd27ed

#1866) ## Description Ah, here we go again... When header is hidden (`headerShown: false` in v6, `hidden: true` in v5) the method that updates header configuration returns early just after setting some layout related and LTR/RTL options, thus `title` property of current `UINavigationItem` is left unset leading to system default name `Back` being displayed in "back context menu". Fixes #1864 ## Changes When returning early (because header is hidden) we now set the `UINavigationItem` property to proper value. ## Test code and steps to reproduce `Test1864` in `FabricTestExample` & `TestsExample`. I've also tested it in context of * #1646 and mix of both. Seems to work fine. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes

## Description Because of a bug introduced in software-mansion/react-native-screens#1646 `react-native-screens` v3.21 changed how header's backTitle handles whitespace strings in software-mansion/react-native-screens#1726 To allow for backwards compatibility in @react-navigation/native-stack we need have a way to check if this version or newer is used See react-navigation/react-navigation#11423 for more context. ## Changes Added new `isNewBackTitleImplementation` internal constant that can be used in `@react-navigation/native-stack`. ## Screenshots / GIFs #### This change & react-navigation/react-navigation#11423 applied: https://github.com/software-mansion/react-native-screens/assets/39658211/e2409b46-0725-473d-962b-1acc9deaa469 #### Without this change and react-navigation/react-navigation#11423: https://github.com/software-mansion/react-native-screens/assets/39658211/ec65fd5d-f8e9-4d88-b442-6bfc68e9ee9c ## Test code and steps to reproduce Test1791.tsx You need to apply changes introduced in react-navigation/react-navigation#11423 to `@react-navigation/native-stack` to test these canges. ## Checklist - [x] Included code example that can be used to test this change

…r (#1866) ## Description Ah, here we go again... When header is hidden (`headerShown: false` in v6, `hidden: true` in v5) the method that updates header configuration returns early just after setting some layout related and LTR/RTL options, thus `title` property of current `UINavigationItem` is left unset leading to system default name `Back` being displayed in "back context menu". Fixes #1864 ## Changes When returning early (because header is hidden) we now set the `UINavigationItem` property to proper value. ## Test code and steps to reproduce `Test1864` in `FabricTestExample` & `TestsExample`. I've also tested it in context of * software-mansion/react-native-screens#1646 and mix of both. Seems to work fine. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes

## Description ~This PR improves upon #2105. #2105 allowed to use iOS 14 default back button behavior when label is not provided. This PR allows to modify the behavior by allowing to provide UINavigationButtonBackButtonDisplayMode and enables it for custom text (without style modifications). The main problem is that we used to provide backButtonItem in most of the cases which [disables](https://developer.apple.com/documentation/uikit/uinavigationitem/3656350-backbuttondisplaymode) backButtonDisplayMode.~ This PR adds possibility to customize default behavior of back button using `backButtonDisplayMode` ([UINavigationBackButtonDisplayMode](https://developer.apple.com/documentation/uikit/uinavigationitem/backbuttondisplaymode)) for iOS. :warning: **This modifies only default back button**, when any customization is added (including headerBackTitle) in native part we create custom `RNSUIBarButtonItem` and set it as `backButtonItem`, which [disables](https://developer.apple.com/documentation/uikit/uinavigationitem/3656350-backbuttondisplaymode) `backButtonDisplayMode` behavior. I tried to make it work together with custom label (`headerBackTitle`) using `prevItem.backButtonTitle`, but due to iOS limitations it is not viable option. It influences also back button menu - changes the label of previous screen - which is not the behavior we want. To sum up, `backButtonDisplayMode` work when none of: - `headerBackTitleStyle.fontFamily` - `headerBackTitleStyle.fontSize` - `headerBackTitle` - `disableBackButtonMenu` are set. ## Screenshots / GIFs |Paper|Fabric| |-|-| |<video src="https://github.com/software-mansion/react-native-screens/assets/11800297/c6aa7697-4331-4cb4-a81d-7f77f128513d" />|<video src="https://github.com/software-mansion/react-native-screens/assets/11800297/fa0edd92-1aa2-45e5-a466-516c0ec120d2" />| <details> <summary>Example component used in tests:</summary> ```jsx import * as React from 'react'; import { Button, View, Text, StyleSheet } from 'react-native'; import { NavigationContainer, ParamListBase } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); type NavProp = { navigation: NativeStackNavigationProp<ParamListBase>; }; export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="screenA" component={ScreenA} options={{ headerTitle: 'A: Home' }} /> <Stack.Screen name="screenB" component={ScreenB} options={{ headerTitle: 'B: default', backButtonDisplayMode: 'default', }} /> <Stack.Screen name="screenC" component={ScreenC} options={{ headerTitle: 'C: generic', backButtonDisplayMode: 'generic', }} /> <Stack.Screen name="screenD" component={ScreenD} options={{ headerTitle: 'D: minimal', backButtonDisplayMode: 'minimal', }} /> <Stack.Screen name="screenE" component={ScreenE} options={{ headerTitle: 'E: custom', headerBackTitle: 'Back Title', backButtonDisplayMode: 'minimal', }} /> </Stack.Navigator> </NavigationContainer> ); } const ScreenA = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen A</Text> <Button onPress={() => navigation.navigate('screenB')} title="Go to screen B" /> </View> ); const ScreenB = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen B</Text> <Text>backButtonDisplayMode: default</Text> <Button onPress={() => navigation.navigate('screenC')} title="Go to screen C" /> </View> ); const ScreenC = ({ navigation }: NavProp) => ( <View style={{ flex: 1, paddingTop: 50 }}> <Text>Screen C</Text> <Text>backButtonDisplayMode: generic</Text> <Button onPress={() => navigation.navigate('screenD')} title="Go to screen D" /> </View> ); const ScreenD = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen D</Text> <Text>backButtonDisplayMode: minimal</Text> <Button onPress={() => navigation.navigate('screenE')} title="Go to screen E" /> </View> ); const ScreenE = (_props: NavProp) => ( <View style={styles.container}> <Text>Screen E</Text> <Text>backButtonDisplayMode omitted because of the headerBackTitle</Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'space-around' }, }); ``` </details> ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation:  - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes Tested #1864: Paper ✅ Fabric ✅ Tested #1646: Paper ❌ Fabric ❌ - but it does not work on main too, could now be achieved using `backButtonDisplayMode: ‘minimal’` --------- Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>

software-mansion#1866) ## Description Ah, here we go again... When header is hidden (`headerShown: false` in v6, `hidden: true` in v5) the method that updates header configuration returns early just after setting some layout related and LTR/RTL options, thus `title` property of current `UINavigationItem` is left unset leading to system default name `Back` being displayed in "back context menu". Fixes software-mansion#1864 ## Changes When returning early (because header is hidden) we now set the `UINavigationItem` property to proper value. ## Test code and steps to reproduce `Test1864` in `FabricTestExample` & `TestsExample`. I've also tested it in context of * software-mansion#1646 and mix of both. Seems to work fine. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes

…e-mansion#2123) ## Description ~This PR improves upon software-mansion#2105. software-mansion#2105 allowed to use iOS 14 default back button behavior when label is not provided. This PR allows to modify the behavior by allowing to provide UINavigationButtonBackButtonDisplayMode and enables it for custom text (without style modifications). The main problem is that we used to provide backButtonItem in most of the cases which [disables](https://developer.apple.com/documentation/uikit/uinavigationitem/3656350-backbuttondisplaymode) backButtonDisplayMode.~ This PR adds possibility to customize default behavior of back button using `backButtonDisplayMode` ([UINavigationBackButtonDisplayMode](https://developer.apple.com/documentation/uikit/uinavigationitem/backbuttondisplaymode)) for iOS. :warning: **This modifies only default back button**, when any customization is added (including headerBackTitle) in native part we create custom `RNSUIBarButtonItem` and set it as `backButtonItem`, which [disables](https://developer.apple.com/documentation/uikit/uinavigationitem/3656350-backbuttondisplaymode) `backButtonDisplayMode` behavior. I tried to make it work together with custom label (`headerBackTitle`) using `prevItem.backButtonTitle`, but due to iOS limitations it is not viable option. It influences also back button menu - changes the label of previous screen - which is not the behavior we want. To sum up, `backButtonDisplayMode` work when none of: - `headerBackTitleStyle.fontFamily` - `headerBackTitleStyle.fontSize` - `headerBackTitle` - `disableBackButtonMenu` are set. ## Screenshots / GIFs |Paper|Fabric| |-|-| |<video src="https://github.com/software-mansion/react-native-screens/assets/11800297/c6aa7697-4331-4cb4-a81d-7f77f128513d" />|<video src="https://github.com/software-mansion/react-native-screens/assets/11800297/fa0edd92-1aa2-45e5-a466-516c0ec120d2" />| <details> <summary>Example component used in tests:</summary> ```jsx import * as React from 'react'; import { Button, View, Text, StyleSheet } from 'react-native'; import { NavigationContainer, ParamListBase } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); type NavProp = { navigation: NativeStackNavigationProp<ParamListBase>; }; export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="screenA" component={ScreenA} options={{ headerTitle: 'A: Home' }} /> <Stack.Screen name="screenB" component={ScreenB} options={{ headerTitle: 'B: default', backButtonDisplayMode: 'default', }} /> <Stack.Screen name="screenC" component={ScreenC} options={{ headerTitle: 'C: generic', backButtonDisplayMode: 'generic', }} /> <Stack.Screen name="screenD" component={ScreenD} options={{ headerTitle: 'D: minimal', backButtonDisplayMode: 'minimal', }} /> <Stack.Screen name="screenE" component={ScreenE} options={{ headerTitle: 'E: custom', headerBackTitle: 'Back Title', backButtonDisplayMode: 'minimal', }} /> </Stack.Navigator> </NavigationContainer> ); } const ScreenA = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen A</Text> <Button onPress={() => navigation.navigate('screenB')} title="Go to screen B" /> </View> ); const ScreenB = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen B</Text> <Text>backButtonDisplayMode: default</Text> <Button onPress={() => navigation.navigate('screenC')} title="Go to screen C" /> </View> ); const ScreenC = ({ navigation }: NavProp) => ( <View style={{ flex: 1, paddingTop: 50 }}> <Text>Screen C</Text> <Text>backButtonDisplayMode: generic</Text> <Button onPress={() => navigation.navigate('screenD')} title="Go to screen D" /> </View> ); const ScreenD = ({ navigation }: NavProp) => ( <View style={styles.container}> <Text>Screen D</Text> <Text>backButtonDisplayMode: minimal</Text> <Button onPress={() => navigation.navigate('screenE')} title="Go to screen E" /> </View> ); const ScreenE = (_props: NavProp) => ( <View style={styles.container}> <Text>Screen E</Text> <Text>backButtonDisplayMode omitted because of the headerBackTitle</Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'space-around' }, }); ``` </details> ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation:  - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes Tested software-mansion#1864: Paper ✅ Fabric ✅ Tested software-mansion#1646: Paper ❌ Fabric ❌ - but it does not work on main too, could now be achieved using `backButtonDisplayMode: ‘minimal’` --------- Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>

fix: fix backButtonMenu for headerBackTitleVisible

f968500

kacperkapusciak requested a review from kkafar November 22, 2022 15:55

kacperkapusciak added 5 commits November 22, 2022 16:59

chore: add test example

b316c04

fix: use back button mode minimal syntax

f74141b

fix: check iOS version first

1b4899f

fix: check if backtitle is not null

ae1f9b9

chore: update examples

eb14c21

kacperkapusciak marked this pull request as ready for review November 23, 2022 12:20

kkafar reviewed Nov 23, 2022

View reviewed changes

kacperkapusciak and others added 4 commits November 23, 2022 16:02

fix: properly reset back button mode on fabric

6cce851

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>

fix: apply different solution to missing backtitle

c9cbdb4

fix: reset back button mode to default

6be82c5

chore: use newest reanimated rc in fabric example

21c69d4

kkafar approved these changes Dec 2, 2022

View reviewed changes

kkafar merged commit e871092 into main Dec 2, 2022

kkafar deleted the @kacperkapusciak/fix-back-title-visible branch December 2, 2022 10:26

DrOverbuild added a commit to DrOverbuild/react-native-screens that referenced this pull request Dec 27, 2022

apply changes made from software-mansion#1646

e7121d9

not included originally due to merge conflict

yusufyildirim mentioned this pull request Mar 2, 2023

fix(iOS): back button not respecting style options #1726

Merged

8 tasks

brentvatne mentioned this pull request Apr 12, 2023

headerBackTitleVisible: false causes the back menu items to be blank react-navigation/react-navigation#11015

Closed

12 tasks

This was referenced Jun 15, 2023

fix: fix headerBackTitleVisible in native-stack react-navigation/react-navigation#11423

Merged

fix: add internal isNewBackTitleImplementation const #1791

Merged

kkafar mentioned this pull request Aug 10, 2023

fix(iOS): wrong title in back button menu for screens w/ hidden header #1866

Merged

2 tasks

maciekstosio mentioned this pull request May 14, 2024

feat(iOS): Add support for UINavigationBackButtonDisplayMode #2123

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: fix back button menu for headerBackTitleVisible prop #1646

fix: fix back button menu for headerBackTitleVisible prop #1646

kacperkapusciak commented Nov 22, 2022 •

edited

Loading

kkafar left a comment

kkafar left a comment

kpoelhekke commented Feb 6, 2023

kkafar commented Feb 6, 2023

kpoelhekke commented Feb 6, 2023 •

edited

Loading

fix: fix back button menu for headerBackTitleVisible prop #1646

fix: fix back button menu for headerBackTitleVisible prop #1646

Conversation

kacperkapusciak commented Nov 22, 2022 • edited Loading

Description

Screenshots / GIFs

Before

After

No effect on iOS 13 (still uses an empty string as there's no back button menu available)

Test code and steps to reproduce

Checklist

kkafar left a comment

Choose a reason for hiding this comment

kkafar left a comment

Choose a reason for hiding this comment

kpoelhekke commented Feb 6, 2023

kkafar commented Feb 6, 2023

kpoelhekke commented Feb 6, 2023 • edited Loading

kacperkapusciak commented Nov 22, 2022 •

edited

Loading

kpoelhekke commented Feb 6, 2023 •

edited

Loading